<template>
    <div style="display: flex;justify-content: center">
      <a-spin :spinning="chartSpinning" >
          <svg id="echarts_map" :style="{height: virtualR*2+'px',width:virtualR*2+'px'}" ></svg>
      </a-spin>
    </div>
</template>
<script>
import {mapState,mapMutations} from 'vuex'
import * as d3 from 'd3'

let virtualR = 240
let defectR = 4
let scale = 1000

export default {
  name: "ProMap.vue",
  props: {
    mapData: {
      type:Object,
      default: () => {},
    },
  },
  data() {
    return {
        virtualR,
      chartLoad: true,
    }
  },
  computed:{
      ...mapState('ProductConfig',['chartSpinning'])
  },
  methods:{
      ...mapMutations('ProductConfig',['setChartSpinning']),

      drawMap({virtualList, virtualBoxWidth, virtualBoxHeight,direction,defectList}){
      let x,y

      let r = virtualR
      let width = virtualR*2
      let height = virtualR*2
      let center = {
          x:virtualR,
          y:virtualR
      }


      switch (direction) {
      case "DOWN":
          x = width/2;
          y = height;
          break;
      case "RIGHT":
          x = width;
          y = height/2;
          break;
      case "LEFT":
          x = 0;
          y = height/2;
          break;
      case "UP":
          x = width/2;
          y = 0;
          break;
      }
      d3.select("#echarts_map").selectAll('*').remove()
      //画圆
      let svg = d3.select("#echarts_map")
          .append('svg')
          .attr('width',width)
          .attr('height',height)
      svg
          .append('circle')
          .attr('cx',center.x)
          .attr('cy',center.y)
          .attr('r',virtualR)
          .attr('fill','#a8a8a8')

      svg
          .append('circle')
          .attr('cx',x)
          .attr('cy',y)
          .attr('r',10)
          .attr('fill','#fff')

        //画die
        virtualList.forEach( e => {
          svg
              .append('rect')
              .attr('x',e.x)
              .attr('y',e.y)
              .attr('width',virtualBoxWidth)
              .attr('height',virtualBoxHeight)
              .attr('stroke','black')
              .attr('stroke-width',0.1)
              .attr('fill','#fff')
        })
        //画defect
        defectList.forEach( e => {
          let die = virtualList.find( d => d.originX === e.xIndex && d.originY === e.yIndex)
          if(die){
              svg
                  .append('rect')
                  .attr('x', die.x + e.xRel - defectR/2)
                  .attr('y', die.y - e.yRel - defectR/2)
                  .attr('width',defectR)
                  .attr('height',defectR)
                  .attr('fill','#f00')
          }
        })
          setTimeout(()=>{
              this.setChartSpinning(false)
          })
      },
    //Map图数据处理
    setMapData(val){
        let dtaobj = val;
        let myFavShowArray = dtaobj.sample_test_plan_list.split(';');
        let newFavShowArray = myFavShowArray.map(el=>
        {
            return el.split(',')
        })
        let newFavShowArrayNoNull = newFavShowArray.filter(el=> el.some(Boolean))

        let numArray = newFavShowArrayNoNull.map(el=>
        {
            return el.map(Number)
        })

        let realR = dtaobj.sample_size*scale/2

        let rate = virtualR/realR

        let virtualBoxWidth = dtaobj.die_pitch_x * rate
        let virtualBoxHeight = dtaobj.die_pitch_y * rate

        let offsetX = (dtaobj.sample_center_location_x)*rate
        let offsetY = (dtaobj.sample_center_location_y)*rate

        let realDieOriginX = dtaobj.die_origin_x * rate
        let realDieOriginY = dtaobj.die_origin_y * rate

        //die坐标
        let virtualList = numArray.map( e => {
            return {
                originX: e[0],
                originY: e[1],
                x: e[0]*virtualBoxWidth - offsetX + realDieOriginX + virtualR,
                //svg的Y轴正方向向下，而图的Y轴正方向向上，所以Y要*-1
                y: (-1)*(e[1]*virtualBoxHeight - offsetY + realDieOriginY) + virtualR - virtualBoxHeight
            }
        })

        //defect坐标
        let defectList = dtaobj.defectList.map( e => {
            return {
                xRel:e[0]*rate,
                yRel:e[1]*rate - virtualBoxHeight,
                xIndex:Number(e[2]),
                yIndex:Number(e[3]),
            }
        })

        let direction = dtaobj.orientation_mark_location

        this.drawMap({
            virtualList,
            virtualBoxWidth,
            virtualBoxHeight,
            direction:direction,
            defectList:defectList
        })
    },
      clearMap(){
          d3.select("#echarts_map").selectAll('*').remove()
      }
  },
  watch: {
    'mapData' (newVal, oldVal) {
      if(Object.keys(newVal).length===0){
          this.clearMap()
      } else {
        this.setMapData(newVal);
      }
    }
  },
  mounted() {

  }
}
</script>
<style scoped>
.yyMapImgdown {
  background-size: 100%;
  background-repeat:no-repeat;
  background-image: url("../../assets/down.png");
}
.yyMapImgup {
  background-size: 100%;
  background-repeat:no-repeat;
  /*repeat:'no-repeat';*/
  background-image: url("../../assets/up.png");
}
.yyMapImgleft {
  background-size: 100%;
  background-repeat:no-repeat;
  background-image: url("../../assets/left.png");
}
.yyMapImgright {
  background-size: 100%;
  background-repeat:no-repeat;
  background-image: url("../../assets/right.png");
}
</style>
